<template>
    <el-button type="primary" @click="add(props)">添加</el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="轮播图ID" width="150" />
        <el-table-column prop="title" label="标题" width="150" />
        <el-table-column prop="img" label="轮播图显示" sortable width="150">
            <!--插入图片链接的代码-->
            <template #default="row">
                <el-image :src="row.row.img" style="width: 70px; height: 70px" />
            </template>
        </el-table-column>
        <el-table-column label="是否推荐" width="150">
            <template #default="row">
                <el-switch v-model="row.row.recommend" class="mt-2" @click="tuijina(row)" />
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="310">
            <template #default="row">
                <el-button type="success" @click="handleClick(row)"> 编辑 </el-button>
                <el-popconfirm title="你确定要删除吗?" @confirm="del(row)">
                    <template #reference>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible1" title="增加" width="30%">
        <el-form label-width="150px">
            <el-form-item label="轮播图ID">
                <el-input v-model="info1.id" />
            </el-form-item>
        </el-form>
        <el-form label-width="150px">
            <el-form-item label="标题">
                <el-input v-model="info1.title" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="insert()" v-model="dialogVisible1">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="编辑" width="30%">
        <el-form label-width="120px">
            <el-form-item label="轮播图ID">
                <el-input v-model="info.id" />
            </el-form-item>
        </el-form>
        <el-form label-width="120px">
            <el-form-item label="标题">
                <el-input v-model="info.title" />
            </el-form-item>
        </el-form>

        <el-form label-width="120px">
            <el-form-item label="创建时间">
                <el-input v-model="info.createTime" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="edit()" v-model="dialogVisible">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>

import { ElMessage } from 'element-plus'
import { get } from '@/utils/request'
export default {
    data() {
        return {
            dialogVisible: false, //修改对话框是否可见
            dialogVisible1: false, //增加对话框是否可见
            info: {}, //修改
            info1: {}, //
            tableData: []
        }
    },
    //初始化工作
    mounted() {
        get('/getAllcarousels').then((res) => {
            this.tableData = res.data
            console.log(res)
        })
    },

    methods: {
        handleClick(data) {
            this.info = data.row //把数据放到info里边
            //打印info
            // console.log(this.info)
            this.dialogVisible = !this.dialogVisible
        },
        tuijina(row) {
            console.log(row.row)
            get('/updateRecommend2', {
                id: row.row.id,
                recommend: row.row.recommend,
            })
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
        },
        del(data) {
            get('/deletecarousels', { departmentId: data.row.carousel }).then(
                (res) => {
                    ElMessage({
                        message: '删除成功！',
                        type: 'success'
                    })
                    window.location.reload()
                }
            )
        },
        //修改
        edit() {
            this.dialogVisible = !this.dialogVisible //马上消失
            //作用是调整下createTime的格式
            var dt = new Date(this.info.createTime)
            let year = dt.getFullYear()
            let month = dt.getMonth() + 1
            let date = dt.getDate()
            this.info.createTime = year + '/' + month + '/' + date
            get('/updatecarousels', this.info).then((res) => {
                ElMessage({
                    message: '修改成功！',
                    type: 'success'
                })
                //window.location.reload()
            })
        },

        add() {
            this.dialogVisible1 = !this.dialogVisible1
        },

        insert() {
            this.dialogVisible1 = !this.dialogVisible1
            get('/addcarousels', this.info1).then((res) => {
                console.log(res)
                if (res.data == 1) {
                    ElMessage({
                        message: '添加成功',
                        type: 'success'
                    })
                    // 刷新
                    window.location.reload()
                } else {
                    ElMessage({
                        message: '添加失败',
                        type: 'danger'
                    })
                }
            })
        }
    }
}
</script>
